Skip to content

a11y: add aria-label to response action buttons for screen readers#12457

Open
adityasingh2400 wants to merge 1 commit into
continuedev:mainfrom
adityasingh2400:a11y-aria-labels-response-actions-12326
Open

a11y: add aria-label to response action buttons for screen readers#12457
adityasingh2400 wants to merge 1 commit into
continuedev:mainfrom
adityasingh2400:a11y-aria-labels-response-actions-12326

Conversation

@adityasingh2400
Copy link
Copy Markdown

@adityasingh2400 adityasingh2400 commented May 21, 2026

Summary

Fixes #12326 (problem 1 only — chat response action buttons).

The Insert / Copy / Apply / Diff / Compact / Generate-rule / Continue / Delete / Helpful / Unhelpful buttons in chat responses are pure-icon elements with a hover tooltip but no accessible name. NVDA and other screen readers announce them as just "button" or "unlabeled button," which is the specific blocker called out in the issue.

This PR adds an aria-label to each toolbar button, matching the user-visible action. Pure prop additions, no behavior or styling changes.

Changes

  • gui/src/components/gui/HeaderButtonWithToolTip.tsx — accept an optional aria-label prop and default it to the existing tooltip text so every consumer (FeedbackButtons, CopyIconButton, ResponseActions, History rows, etc.) gains an accessible name automatically.
  • gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/*.tsx — add aria-label (and role="button" for div-based clickables) to:
    • InsertButton -> "Insert at cursor"
    • CopyButton -> "Copy code block" / "Code copied"
    • ApplyActions Apply -> "Apply changes"
    • ApplyActions Accept / Reject (via ToolbarButtonWithTooltip) -> "Accept all diffs" / "Reject all diffs"
    • CreateFileButton -> "Create file with code"
    • RunInTerminalButton -> "Run command in terminal"

The broader sidebar / settings / model-selector accessibility audit described in #12325 is out of scope for this first cut; this is the buttons-only piece called out in #12326.

Test plan

  • Build the GUI and confirm chat response action buttons announce their action name in NVDA / VoiceOver / Narrator.
  • Hover tooltips still appear unchanged.
  • Visual layout of the action toolbar is unchanged.
  • No regressions in existing keyboard / click behavior.

Summary by cubic

Add aria-labels to chat response action buttons so screen readers announce clear names. Fixes #12326 for buttons only with no visual or behavior changes.

Written for commit f05e209. Summary will update on new commits. Review in cubic

The Insert/Copy/Apply/Diff buttons on chat responses are pure-icon
elements, so NVDA and similar screen readers announce only the
fallback role text. Add an aria-label matching the user-visible
action to each button so assistive tech reads them out as
'Insert at cursor', 'Copy code block', etc. No behavior change.

Part 1 of the broader sidebar a11y work tracked in continuedev#12325.

Fixes continuedev#12326
@adityasingh2400 adityasingh2400 requested a review from a team as a code owner May 21, 2026 23:43
@dosubot dosubot Bot added the size:S This PR changes 10-29 lines, ignoring generated files. label May 21, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 21, 2026

All contributors have signed the CLA ✍️ ✅
Posted by the CLA Assistant Lite bot.

Copy link
Copy Markdown
Contributor

@cubic-dev-ai cubic-dev-ai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No issues found across 7 files

Re-trigger cubic

@adityasingh2400
Copy link
Copy Markdown
Author

I have read the CLA Document and I hereby sign the CLA

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:S This PR changes 10-29 lines, ignoring generated files.

Projects

Status: Todo

Development

Successfully merging this pull request may close these issues.

Continue extension is completely inaccessible with NVDA screen reader — unlabeled buttons and inaccessible settings

1 participant